<div class="pro-upgrade-dialog modal">
    <div class="modal-header">
        <h1 class="dialog-title">{{{title}}}</h1>
    </div>

    <div class="modal-body" style="max-height: 550px;">
        <div class="waiting-content-container">
            <p style="margin-bottom: 20px; font-size: 14px;">
                {{message}}
            </p>

            <div class="features-grid">
                <!-- Card 1 -->
                <div class="feature-card">
                    <img src="https://docs-images.phcode.dev/phcode-sdk/quick-view-image.png" alt="{{Strings.PROMO_CARD_1}}" class="feature-thumb">
                    <div class="feature-body">
                        <h2>{{Strings.PROMO_CARD_1}}</h2>
                        <p>{{Strings.PROMO_CARD_1_MESSAGE}}</p>
                    </div>
                </div>

                <!-- Card 2 -->
                <div class="feature-card">
                    <img src="https://docs-images.phcode.dev/phcode-sdk/quick-view-image.png" alt="{{Strings.PROMO_CARD_2}}" class="feature-thumb">
                    <div class="feature-body">
                        <h2>{{Strings.PROMO_CARD_2}}</h2>
                        <p>{{Strings.PROMO_CARD_2_MESSAGE}}</p>
                    </div>
                </div>

                <!-- Card 3 -->
                <div class="feature-card">
                    <img src="https://docs-images.phcode.dev/phcode-sdk/quick-view-image.png" alt="{{Strings.PROMO_CARD_3}}" class="feature-thumb">
                    <div class="feature-body">
                        <h2>{{Strings.PROMO_CARD_3}}</h2>
                        <p>{{Strings.PROMO_CARD_3_MESSAGE}}</p>
                    </div>
                </div>

                <!-- Card 4 -->
                <div class="feature-card">
                    <img src="https://docs-images.phcode.dev/phcode-sdk/quick-view-image.png" alt="{{Strings.PROMO_CARD_4}}" class="feature-thumb">
                    <div class="feature-body">
                        <h2>{{Strings.PROMO_CARD_4}}</h2>
                        <p>{{Strings.PROMO_CARD_4_MESSAGE}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal-footer">
        <button class="dialog-button btn" data-button-id="secondaryButton">{{secondaryButton}}</button>
        <button class="dialog-button btn primary" data-button-id="ok">{{{primaryButton}}}</button>
    </div>
</div>
